<template>
    <view>
        <!-- pages/yourPage/yourPage.wxml -->
        <!-- bindreset="onReset -->
        <form @submit="onSubmit" @reset="onReset">
            <view class="form-section">
                <view class="form-item">
                    <view class="label-container">
                        <text class="label">套餐名称</text>
                        <text class="required">*</text>
                    </view>
                    <input name="pkg_name" class="input" placeholder="请输入" :value="item.pkgName" />
                </view>
                <view class="form-item">
                    <view class="label-container">
                        <view class="label">适用门店</view>
                        <text class="required">*</text>
                    </view>
                    <picker mode="selector" name="store" :range="stores" range-key="key" :value="storeIndex" @change="handlePickerChanges" class="picker">
                        <view class="picker-display">{{ storeName }}</view>
                        <view class="arrow-down"></view>
                    </picker>
                </view>
                <view class="form-item">
                    <view class="label-container">
                        <view class="label">
                            套餐时长
                            <text class="required">*</text>
                        </view>
                    </view>
                    <view class="stepper">
                        <button class="btn" data-op="dec" @tap="decreaseDuration"><view>-</view></button>
                        <input type="number" name="duration" class="count-display" :value="hours" disabled />
                        <button class="btn" data-op="inc" @tap="increaseDuration"><view>+</view></button>
                        小时
                    </view>
                </view>
                <view class="form-item">
                    <view class="label-container">
                        <view class="label">限制房间</view>
                    </view>
                    <picker mode="selector" name="storeRoom" :range="storesRoomList" range-key="value" :value="storesRoomIndex" @change="handlePickerChange" class="picker lt">
                        <view class="picker-display">{{ storesRoomName }}</view>
                        <view class="arrow-down"></view>
                    </picker>
                </view>
                <view class="form-item">
                    <view class="label">可用时间</view>
                    <checkbox-group name="enableTime" class="checkbox-containe-group">
                        <view class="checkbox-group-item" v-for="(item, index) in times" :key="index">
                            <checkbox :value="item.index" :checked="item.checked" @tap="toggleCheck" :data-index="index"></checkbox>

                            <text>{{ item.index }}</text>
                        </view>
                    </checkbox-group>
                    <view class="choose">
                        <view @tap="selectAllHours">全选</view>
                        <view @tap="invertSelection">反选</view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="label">可用星期</view>
                    <checkbox-group name="enableWeek" class="checkbox-containe-group">
                        <view class="week-day-item" v-for="(item, index) in weekDays" :key="index">
                            <checkbox @tap="chackWeek" color="#007aff" :value="index + 1" :data-index="index" :checked="checkedStates[index]"></checkbox>

                            <text>{{ item }}</text>
                        </view>
                    </checkbox-group>
                    <view class="choose_1">
                        <view @tap="selectAll">全选</view>
                        <view @tap="selectInverse">反选</view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="label">节假日可用</view>
                    <view class="switch-container">
                        <switch name="enableHoliday" :checked="switchChecked" @change="switchChange" />
                    </view>
                </view>
                <view class="form-item">
                    <view class="label">可余额支付</view>
                    <view class="switch-container">
                        <switch name="balanceBuy" :checked="balanceBuy" @change="switch2Change" />
                    </view>
                </view>
                <view class="form-item">
                    <view class="label-container">
                        <text class="label">销售价格</text>
                        <text class="required">*</text>
                    </view>
                    <input name="price" class="input" placeholder="请输入" type="digit" :value="item.price" @input="handleInput" required />
                </view>
                <view class="form-item">
                    <view class="label-container">
                        <text class="label">过期天数</text>
                    </view>
                    <input name="expireDay" class="input lt" placeholder="0为不过期" required type="number" :value="item.expireDay" />
                </view>
                <view class="form-item">
                    <view class="label label_width">单用户量大 购买数量</view>
                    <input name="maxNum" class="input" placeholder="0 为不限" type="number" :value="item.maxNum" />
                </view>
                <view class="form-item">
                    <view class="label">排序号</view>
                    <input name="sortId" class="input" placeholder="数字越小越靠前" style="margin-left: 13%" type="number" :value="item.sortId" />
                </view>
                <view class="button-group">
                    <button @tap="cancelSave">取消</button>
                    <button formType="submit">保存</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
// pages/editPages/editPages.js
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
const app = getApp();
export default {
    data() {
        return {
            times: new Array(24).fill().map((_, i) => ({
                index: i,
                checked: false
            })),

            index: 0,
            hours: 1,
            stores: [],

            // 用于存储门店列表
            selectedStoreId: null,

            // 选中的门店ID
            storeName: '',

            // 选中的门店名称
            storeIndex: -1,

            // 确保有一个有效的初始索引
            storeId: '',

            switchChecked: false,
            checked: [],

            // 默认选中复选框 a
            weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

            checkedStates: Array(7).fill(false),

            // 初始未选中状态
            storesRoomList: [
                {
                    key: '0',
                    value: '不限'
                },
                {
                    key: '1',
                    value: '小包'
                },
                {
                    key: '2',
                    value: '中包'
                },
                {
                    key: '3',
                    value: '大包'
                },
                {
                    key: '4',
                    value: '豪包'
                },
                {
                    key: '5',
                    value: '商务包'
                }
            ],

            //用于储存限制房间数据
            storesRoomIndex: 0,

            //默认第一个
            storesRoomName: '',

            //选中的限制房间类型
            item: {},

            //回显数据
            price: '',

            //价格
            balanceBuy: false,

            //支持余额支付
            //门店id
            roomStoreId: '',

            roomType: '',
            multiIndex: '',
            weekIndex: '',
            selectedWeekDays: '',
            count: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
        if (options.item) {
            const item = JSON.parse(options.item);
            console.log(item, 'options');
            that.setData({
                item: item,
                storeName: that.formatString(item.storeName, 10),
                //门店
                hours: item.hours,
                //时长
                switchChecked: item.enableHoliday,
                //节假日是否可用
                balanceBuy: item.balanceBuy,
                price: item.price,
                storeId: item.storeId,
                roomType: item.roomType
            });
            //选中指定房间
            that.storesRoomList.forEach(function (v, i) {
                if (v.key == item.roomType) {
                    console.log(v);
                    that.setData({
                        storesRoomIndex: i,
                        storesRoomName: v.value
                    });
                    return;
                }
            });
            // 解析 enableWeek 字符串
            if (item.enableWeek) {
                const weekDaysSet = new Set(item.enableWeek.split(', ').map((day) => day.trim()));
                const checkedStates = this.weekDays.map((day) => weekDaysSet.has(day));
                this.setData({
                    checkedStates: checkedStates
                });
            }
            // 解析 enableTime 字符串
            if (item.enableTime) {
                console.log(item.enableTime);
                const timeIndices = new Set(item.enableTime.map((time) => parseInt(time)));
                console.log(timeIndices, 'timeIndices');
                const times = this.times.map((time, index) => ({
                    index: index,
                    checked: timeIndices.has(index)
                }));
                console.log(times, 'times');
                this.setData({
                    times: times
                });
            }
        }
        that.setData({
            storesRoomIndex: 0,
            storesRoomName: that.storesRoomList[0].value
        });
        that.getStoreList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 获取适用门店列列表
        //获取门店下拉列表数据
        getStoreList: function () {
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    // "/member/index/getStoreList",
                    '/member/store/getStoreList',
                    '1',
                    'get',
                    {
                        cityName: ''
                    },
                    app.globalData.userDatatoken.accessToken,
                    '获取中...',
                    function success(info) {
                        console.info('下拉门店数据===');
                        console.log(info, '门店数据');
                        if (info.code == 0 && info.data.length > 0) {
                            // 更新门店列表和默认选中的门店
                            let storeIndex = 0;
                            info.data.map((it, index) => {
                                console.log(it);
                                if (it.value === that.storeId) {
                                    storeIndex = index;
                                }
                            });
                            that.setData({
                                stores: info.data,
                                storeName: that.formatString(info.data[storeIndex].key, 10),
                                // 默认选中第一个门店的名称
                                storeIndex: storeIndex,
                                // 默认选中门店的索引
                                roomStoreId: info.data[storeIndex].value
                            });
                        } else {
                            uni.showModal({
                                content: '请求服务异常，请稍后重试',
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {
                        uni.showToast({
                            title: '网络错误，请检查您的网络连接',
                            icon: 'none'
                        });
                    }
                );
            } else {
                uni.showToast({
                    title: '请先登录',
                    icon: 'none'
                });
            }
        },

        // 选择门店
        handlePickerChanges: function (e) {
            const newIndex = e.detail.value;
            const newStore = this.stores[newIndex];
            console.log(newStore, 'newStore');
            this.setData({
                storeIndex: e.detail.value,
                roomStoreId: newStore.value,
                storeName: newStore.key
                // storeIndex:newStore.value
            });

            console.log(this.storeIndex, 'storeIndex');
        },

        //
        // 处理用户选择变更：限制房间的类型
        handlePickerChange: function (e) {
            const newIndex = e.detail.value;
            const newStore = this.storesRoomList[newIndex];
            this.setData({
                storesRoomIndex: newIndex,
                storesRoomName: newStore.value
            });
        },

        chackWeek(e) {
            const index = e.currentTarget.dataset.index;
            const checkedStates = this.checkedStates.slice(); // 创建week数组的副本
            checkedStates[index] = !checkedStates[index];
            this.setData({
                checkedStates: checkedStates
            });
        },

        selectAll: function () {
            this.setData({
                checkedStates: Array(7).fill(true)
            });
        },

        // 星期反选
        selectInverse: function () {
            let newStates = this.checkedStates.map((state) => !state);
            this.setData({
                checkedStates: newStates
            });
        },

        bindMultiPickerChange: function (e) {
            this.setData({
                multiIndex: e.detail.value
            });
        },

        bindWeekPickerChange: function (e) {
            this.setData({
                weekIndex: e.detail.value,
                selectedWeekDays: e.detail.value.map((index) => this.weekDays[0][index])
            });
        },

        // 增加时长
        increaseDuration: function () {
            let newCount = this.hours + 1;
            const maxCount = 100; // 假设最大时长为100小时
            if (newCount > maxCount) {
                newCount = maxCount;
                uni.showToast({
                    title: '已达最大时长',
                    icon: 'none'
                });
            }
            this.setData({
                hours: newCount
            });
        },

        // 减少时长
        decreaseDuration: function () {
            let newCount = this.hours - 1;
            const minCount = 1;
            if (newCount < minCount) {
                newCount = minCount;
                uni.showToast({
                    title: '时长不能小于1小时',
                    icon: 'none'
                });
            }
            this.setData({
                hours: newCount
            });
        },

        /* 可用时间处理逻辑：  */
        // 全选所有小时
        selectAllHours: function () {
            const times = this.times.map((item) => ({
                ...item,
                checked: true
            }));
            this.setData({
                times
            });
        },

        // 反选所有小时
        invertSelection: function () {
            const times = this.times.map((item) => ({
                ...item,
                checked: !item.checked
            }));
            this.setData({
                times
            });
        },

        toggleCheck: function (e) {
            const index = e.currentTarget.dataset.index;
            const times = this.times.slice(); // 创建times数组的副本
            times[index].checked = !times[index].checked;
            this.setData({
                times: times
            });
        },

        increment: function () {
            this.setData({
                count: this.count + 1
            });
        },

        decrement: function () {
            this.setData({
                count: this.count - 1
            });
        },

        switchChange: function (e) {
            this.setData({
                switchChecked: e.detail.value
            });
        },

        switch2Change: function (e) {
            this.setData({
                balanceBuy: e.detail.value
            });
        },

        submit: function () {
            uni.showToast({
                title: '提交成功',
                icon: 'success',
                duration: 2000
            });
        },

        cancelSave: function () {
            this.setData({});
            uni.navigateBack();
        },

        //超过10个字符，将显示省略号
        formatString(str, maxLength) {
            if (str.length > maxLength) {
                return str.substring(0, maxLength) + '...';
            } else {
                return str;
            }
        },

        handleInput: function (e) {
            let value = e.detail.value;
            // 只允许输入数字和一个小数点
            value = value.replace(/[^\d.]/g, '');
            // 只保留第一个小数点，去除多余的小数点
            value = value
                .replace(/^\./g, '')
                .replace(/\.{2,}/g, '.')
                .replace('.', '$#$')
                .replace(/\./g, '')
                .replace('$#$', '.');
            // 将处理后的值设置回输入框
            this.setData({
                'item.price': value
            });
        },

        // 表单验证
        onSubmit: function (e) {
            const formData = e.detail.value;
            const selectedTimes = this.times.filter((item) => item.checked).map((item) => item.index);
            // 验证必填项
            if (!formData.pkg_name) {
                uni.showToast({
                    title: '请输入套餐名称',
                    icon: 'none'
                });
                return;
            }
            if (!this.storeName) {
                uni.showToast({
                    title: '请选择适用门店',
                    icon: 'none'
                });
                return;
            }
            if (this.count <= 0) {
                uni.showToast({
                    title: '套餐时长必须大于0',
                    icon: 'none'
                });
                return;
            }
            if (!formData.price) {
                uni.showToast({
                    title: '请输入销售价格',
                    icon: 'none'
                });
                return;
            }
            if (!formData.expireDay) {
                uni.showToast({
                    title: '请输入过期天数',
                    icon: 'none'
                });
                return;
            }
            if (!formData.maxNum) {
                uni.showToast({
                    title: '请输入购买数量',
                    icon: 'none'
                });
                return;
            }
            console.log('formData.store' + formData.store);
            console.log('this.data.roomStoreId' + this.roomStoreId);
            //所有验证成功之后提交数据保存
            // if(app.globalData.isLogin)
            {
                http.request(
                    '/member/pkg/admin/saveAdminPkg',
                    '1',
                    'post',
                    {
                        pkgId: this.item.pkgId,
                        pkgName: formData.pkg_name,
                        //套餐名称
                        hours: formData.duration,
                        //时长
                        storeId: this.roomStoreId,
                        //门店id
                        roomType: formData.storeRoom,
                        //限制房间类型
                        enableTime: formData.enableTime,
                        //可用时间 0-23数字
                        enableWeek: formData.enableWeek,
                        //可用星期 1-7 数字
                        enableHoliday: formData.enableHoliday,
                        //节假日可用
                        balanceBuy: formData.balanceBuy,
                        //节假日可用
                        price: formData.price,
                        //销售价格
                        expireDay: formData.expireDay,
                        //购买后过期时间(天) 0=不过期
                        maxNum: formData.maxNum,
                        //单用户最大购买数量 0=不限
                        sortId: formData.sortId //排序
                        // enable                           //是否启用
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.log(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000,
                                complete: function () {
                                    uni.navigateBack();
                                }
                            });
                        } else {
                            uni.showToast({
                                title: info.msg,
                                icon: 'none'
                            });
                        }
                    }
                );
            }
        },

        onReset() {
            console.log('占位：函数 onReset 未声明');
        }
    }
};
</script>
<style>
@import './editPages.css';
</style>
